<template>
  <div class="permission">
    <div class="operate">
      <div style="flex: 0 0 auto">
        <ep-search
            :size="size"
            v-model="queryParam.fullName"
            placeholder="请输入姓名"
            enter-button="chaxun "
            @search="() =>{this.findList()}"
        ></ep-search>
        <ep-button :size="size" style="margin-left: 15px" icon="refresh.svg" @click="clearBtn"></ep-button>
        <a-tree-select
            :size="size"
            placeholder="请选择任务范围(可多选)"
            ref="taskArea"
            allowClear
            tree-checkable
            style="margin-left: 15px;width:22vw"
            v-model="queryParam.manageAreas"
            :show-checked-strategy="SHOW_PARENT"
            :treeData="taskAreaTree"
            @change="manageAreaChange()"
        />
      </div>
      <ep-button :size="size" style="margin-left: 15px" icon="export.svg" @click="() =>{this.outExcel()}">导出</ep-button>
    </div>
    <div class="ep-table">
      <zh-table height="auto"  ref="personTable"  row-id="roleId"   :url="tableUrl" :columns="tableColumn" >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
      </zh-table>
    </div>
  </div>
</template>
<script>
import {
  getBatchDict,
} from "@/services/system/api"
import {
  getPatrolPersonAssessList,getPermissionParams
} from "@/services/system/whdngxlApi"
import moment from 'moment'
import ZhTable from "@/components/zh-table/ZhTable";
import {TreeSelect} from "ant-design-vue";
import {mapGetters} from "vuex";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
export default {
  name: 'PatrolPsAssess',
  components: {
    ZhTable
  },
  computed: {
    ...mapGetters(['size']),
  },
  data() {
    return {
      dictData: {},
      filtersData:{},
      queryParam: {
        fullName:'',
        manageAreas: undefined,
      },
      taskAreaTree: [],
      SHOW_PARENT,
      tableColumn: [
        {field: 'manageArea', title: '区域' ,visible: true, align: 'center',width: 150},
        {field: 'fullName', title: '巡查人员', visible: true, align: 'center',width: 120},
        {field: 'department', title: '单位',  visible: true, align: 'center',width: 300},
        {field: 'tasksNum', title: '任务总数', visible: true,sortable:true, align: 'center',width: 100},
        {field: 'timeoutNum', title: '超时数量', visible: true,sortable:true, align: 'center',width: 100 },
        {field: 'disposedRate', title: '完成效率',sortable:true, align: 'center',width: 120 },
        {field: 'streetRank', title: '街道排名',sortable:true, align: 'center', width: 120 },
        {field: 'districtRank', title: '区域排名',sortable:true, align: 'center',  width: 120},
      ],
      tableData: [],
      tableUrl: getPatrolPersonAssessList,
      toolbarConfig: {
        custom: true,
        slots: {}
      },
    }
  },
  created() {
    //获取任务范围
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
    // 数据字典初始化
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
    this.findList()
  },
  methods: {
    moment,
    manageAreaChange() {
      this.findList();
    },
    init(){
     /* const params = {}
      params.dictFields = ''
      this.$http.post(getBatchDict, params).then(res => {
        this.dictData = res.result
        //获取筛选数据
        this.getFiltersData(this,'personTable')
      })*/
    },
    clearBtn(){
      this.findList()
    },
    findList() {
      this.$refs.personTable.query(this.queryParam)
    },
    outExcel(){
      this.$refs.personTable.exportData("巡查人员考核",'csv');
    },
    filterAreaMethod({ option, row }) {
      return row.tasksArea.includes(option.data)
    },
    filterC0302Method({ option, row }) {
      return row.c0302.includes(option.data)
    },
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 60px);
  }
}
</style>
